<template>
  <div class="body">
    <div class="register">
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple-dark">注册</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <div class="grid-content ">账号：</div>
        </el-col>
        <el-col :span="14">
          <div class="grid-content bg-purple-light" :span="13">
            <el-input v-model="input" placeholder="请输入账号"></el-input>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <div class="grid-content ">密码：</div>
        </el-col>
        <el-col :span="14">
          <div class="grid-content bg-purple-light" :span="13">
            <el-input placeholder="请输入密码(至少6位)" v-model="inputPwd" show-password></el-input>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <div class="grid-content ">确认密码：</div>
        </el-col>
        <el-col :span="14">
          <div class="grid-content bg-purple-light" :span="13">
            <el-input placeholder="请重新输入密码" v-model="inputPwd2" show-password></el-input>
          </div>
        </el-col>
      </el-row>
      <!-- <input type="button" id="register" value="注册" @click="register"> -->
      <el-button class="input1" :plain="true" type="primary" round @click="register">注册</el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'RegisterView',
  data() {
    return {
      input: '',
      inputPwd: '',
      inputPwd2: ''
    }
  },
  methods: {
    register() {
      if (this.input.length == 0) {
        this.$message({
          showClose: true,
          message: '账号不能为空!',
          type: 'warning'
        });
      } else if (this.inputPwd != this.inputPwd2 || this.inputPwd.length < 6) {
        this.$message({
          showClose: true,
          message: '密码输入有误，请重新输入',
          type: 'error'
        });
        this.inputPwd = ''
        this.inputPwd2 = ''
      }
      else {
        this.axios.post('/api/register', { userName: this.input, userPwd: this.inputPwd })
          .then(res => {
            console.log(res);
            if (res.data.message == 'ok') {
              this.$message({
                showClose: true,
                message: '注册成功',
                type: 'success'
              });
              this.$router.push('/login')
            }else{
              this.$message({
                showClose: true,
                message: '用户名重复，注册失败',
                type: 'error'
              });
            }
          })
      }
    },
  }
}
</script>
<style lang="scss">
.register {
  width: 400px;
  margin: 10px auto;
  position: relative;
  top: 200px;
  border: 1px solid #000;
  border-radius: 5px;
  height: 300px;
  background-color: #e5e9f2;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
  height: 50px;
  font-size: 30px;

}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  line-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.body {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(http://pic.bizhi360.com/bbpic/88/8788.jpg)no-repeat center top;
}

.input2 {
  margin-left: 50px;
  width: 50px;
  height: 30px;
  background-color: #bfbfbf;

}
</style>